<template>
	<div class="model">
		<h2 class="model__title">大图<span @click="close" class="model__title--close">&times;</span></h2>
		<div class="model__content">
			<img v-if="imgUrl" :src="imgUrl"/>
		</div>
	</div>
</template>

<script>
	export default {
		props: ["imgUrl"],
		methods: {
			close() {
				this.$parent.isShowBigImg = false;
			}
		},
		computed: {
		}
	}
</script>

<style lang="scss" scoped>
	.model {
		position: fixed;
		width: 600px;
		height: 500px;
		background: #fafafa;
		z-index: 999;
		border-radius: 15px;
		left: calc(50% - 300px);
		top: calc(50% - 250px);
		box-shadow: 0 0 10px #bbb;
		img {
			width: 100%;
		}
	}
</style>